<template>
  <div class="recommend-choiceness-list">
    <div
      class="recommend-choiceness-list-wrap"
      v-for="goodList in goodLists"
      :key="goodList.id"
    >
      <img :src="goodList.pic" alt="" />
      <div class="recommend-choiceness-list-info">
        <div class="recommend-choiceness-list-title">
          {{ goodList.title }}
        </div>
        <div class="recommend-choiceness-list-price">
          <span class="recommend-choiceness-list-quan">券后</span>
          <span class="recommend-choiceness-list-logo">￥</span>
          <span class="recommend-choiceness-list-price1">{{
            goodList.jiage
          }}</span>
        </div>
        <div class="recommend-choiceness-list-disc">
          <span class="recommend-choiceness-list-disc1" v-if="goodList.quanJine"
            >限时立减 {{ goodList.quanJine }} 元</span
          >
          <div class="recommend-choiceness-list-disc2">
            <span
              class="recommend-choiceness-list-disc2-quan"
              v-if="goodList.quanJine"
              >券</span
            >
            <span>{{ goodList.quanJine }} 元</span>
          </div>
        </div>
        <div class="recommend-choiceness-list-sellNum">
          已售
          {{
            (goodList.xiaoliang =
              goodList.xiaoliang > 10000
                ? parseInt(goodList.xiaoliang / 10000) + "万"
                : goodList.xiaoliang)
          }}
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  setup() {
    const store = useStore();
    const goodLists = computed(() => {
      return store.state.postAge.goodLists;
    });
    return { goodLists };
  },
});
</script>

<style lang="stylus" scoped>
.recommend-choiceness-list-sellNum
    font-size .1rem
    color #888
    margin-top .06rem
.recommend-choiceness-list-disc
    margin-top .025rem
    display: flex;
    .recommend-choiceness-list-disc1
        color rgb(255, 99, 5)
        border-color rgb(245, 114, 36)
        margin-right 10px
        font-size .1rem
        border 1px solid #f57224
    .recommend-choiceness-list-disc2
        background linear-gradient(90deg,#ff8873,#ff4f4f)
        border-radius .02rem
        display inline-block
        padding 0 .03rem 0 .01rem
        font-size .1rem
        color #fff
        text-align center
        .recommend-choiceness-list-disc2-quan
            display: inline-block;
            font-size: .09rem;
            font-weight: 400;
            color: #ff5351;
            line-height: .1rem;
            padding: .01px .02rem;
            background: #fff;
            border-radius: .01rem 0 0 .01rem;
            text-align: center;
            margin-right: .03rem;
    // .recommend-choiceness-list-disc3
    //     color rgb(255, 53, 96)
    //     border-color rgb(255, 1, 55);
    //     margin-right .01rem;
    //     border-radius .02rem
    //     border 1px solid #f57224
    //     padding 0 .04rem
    //     height .14rem
    //     font-size .1rem
 .recommend-choiceness-title
        width .83rem
        height .35rem
        background url(https://cmsstatic.ffquan.cn/dist/static/foryou.012aad09.png) no-repeat 50%
        background-size 100%
        margin 1.2rem auto .1rem
    .recommend-choiceness-list
        display flex
        justify-content space-between
        flex-wrap wrap
        padding 0 .1rem
        .recommend-choiceness-list-wrap
            border-radius .04rem
            background #fff
            width 49%
            margin-bottom .1rem
            padding-bottom .1rem
            .recommend-choiceness-list-info
                padding 0 .07rem
            img
                border-radius .04rem .04rem  0 0
                display block
                width 100%
                height 1.6rem
                margin 0 auto .1rem

            .recommend-choiceness-list-title
                padding 0 .1rem
                font-size .12rem
                overflow hidden
                text-overflow ellipsis
                white-space nowrap
            .recommend-choiceness-list-price
                font-size .1rem
                margin-top .1rem
                .recommend-choiceness-list-quan
                    color #666
                .recommend-choiceness-list-logo
                    font-size .12rem
                    font-weight 500
                    color #fe3738
                    margin 0 .02rem 0 .06rem
                .recommend-choiceness-list-price1
                    font-size .19rem
                    font-weight 500
                    color #fe3738
</style>
